<template>
  <div class="my-input">
    <el-input-number
      ref="refInput"
      class="inner-input"
      v-bind="$attrs"
      controls-position="right"
      :step="step"
    >
      <template v-for="(_value, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}" />
      </template>
    </el-input-number>
    <div class="my-input-btn-wrap">
      <div class="my-input-btn plus" @click="handleChange(1)">+</div>
      <div class="my-input-btn minus" @click="handleChange(-1)">-</div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  step: {
    type: Number,
    default: 100,
  },
});

const emit = defineEmits(["countChange"]);

const instance = getCurrentInstance();

const refInput = ref();

onMounted(() => {
  const entries = Object.entries(refInput.value.$.exposed);
  for (const [key, value] of entries) {
    instance.exposed[key] = value;
  }
});

function handleChange(type) {
  emit("countChange", type);
}
</script>
<style lang="scss" scoped>
.my-input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;

  .inner-input {
    height: 100%;
    width: 70px;

    ::v-deep {
      .el-input {
        height: 100%;
      }

      .el-input__wrapper {
        padding-left: 6px;
        padding-right: 10px;
      }

      .el-input__inner {
        text-align: left;
      }

      .el-input-number__increase,
      .el-input-number__decrease {
        width: 16px;
        height: 50%;
      }
    }
  }

  .my-input-btn-wrap {
    height: 100%;
    border: 1px solid rgb(220, 223, 230);
    border-left: 0px;
    background: rgb(245, 247, 250);
    position: relative;
    border-radius: 4px;
    left: -2px;

    .my-input-btn {
      cursor: pointer;
      width: 16px;
      height: 50%;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;

      &.plus {
        border-bottom: 1px solid rgb(220, 223, 230);
      }
    }
  }
}
</style>
